<template>
  <el-form :model="editData" label-position="right" label-width="80px" size="small" ref="form3" :rules="rules">
    <el-form-item :label="$t('api_test.variable_name')" prop="name">
      <el-input v-model="editData.name" :placeholder="$t('api_test.variable_name')"></el-input>
    </el-form-item>

    <el-form-item :label="$t('commons.description')" prop="description">
      <el-input
        class="ms-http-textarea"
        v-model="editData.description"
        type="textarea"
        :disabled="disabled"
        :placeholder="$t('commons.input_content')"
        :autosize="{ minRows: 2, maxRows: 10 }"
        :rows="2"
        size="small" />
    </el-form-item>
    <el-tabs v-model="activeName" @tab-click="handleClick" style="margin-left: 40px">
      <el-tab-pane :label="$t('variables.config')" name="config">
        <el-row>
          <el-col :span="5" style="margin-top: 5px">
            <span>{{ $t('variables.add_file') }}</span>
          </el-col>
          <el-col :span="19">
            <ms-csv-file-upload :parameter="editData"  :disabled="disabled"/>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-col :span="5" style="margin-top: 5px">
            <span>Encoding</span>
          </el-col>
          <el-col :span="19">
            <el-autocomplete
              size="small"
              style="width: 100%"
              v-model="editData.encoding"
              :disabled="disabled"
              :fetch-suggestions="querySearch"
              :placeholder="$t('commons.input_content')"></el-autocomplete>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-col :span="5" style="margin-top: 5px">
            <span>{{ $t('variables.delimiter') }}</span>
          </el-col>
          <el-col :span="19">
            <el-input v-model="editData.delimiter" size="small" :disabled="disabled" />
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-col :span="5" style="margin-top: 5px">
            <span>{{ $t('variables.quoted_data') }}</span>
          </el-col>
          <el-col :span="19">
            <el-select v-model="editData.quotedData" size="small" :disabled="disabled">
              <el-option label="true" :value="true" />
              <el-option label="false" :value="false" />
            </el-select>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane :label="$t('schema.preview')" name="preview">
        <div v-if="showMessage">{{ $t('variables.csv_message') }}</div>
        <el-table :data="previewData" style="width: 100%" height="200px" v-loading="loading">
          <!-- 自定义列的遍历-->
          <el-table-column
            v-for="(item, index) in columns"
            :key="index"
            :label="columns[index]"
            align="left"
            width="180">
            <!-- 数据的遍历  scope.row就代表数据的每一个对象-->
            <template slot-scope="scope">
              <span>{{ scope.row[index] }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </el-form>
</template>

<script>
import MsCsvFileUpload from './CsvFileUpload';

export default {
  name: 'MsEditCsv',
  components: {
    MsCsvFileUpload,
  },
  props: {
    editData: {},
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      activeName: 'config',
      visible: false,
      loading: false,
      editFlag: false,
      previewData: [],
      columns: [],
      allData: [],
      showMessage: false,
      rules: {
        name: [
          {
            required: true,
            message: this.$t('test_track.case.input_name'),
            trigger: 'blur',
          },
        ],
      },
    };
  },
  watch: {
    'editData.name': {
      handler(v) {
        this.handleClick();
      },
    },
  },
  methods: {
    complete(results) {
      if (results.errors && results.errors.length > 0) {
        this.$error(results.errors);
        return;
      }
      if (this.allData) {
        this.columns = this.allData[0];
        this.allData.splice(0, 1);
        this.previewData = this.allData;
      }
      this.loading = false;
    },
    cleanPreview() {
      this.allData = [];
      this.columns = [];
      this.previewData = [];
    },
    step(results, parser) {
      if (this.allData.length < 500) {
        this.allData.push(results.data);
      } else {
        this.showMessage = true;
      }
    },

    handleClick() {
      let config = {
        complete: this.complete,
        step: this.step,
        delimiter: this.editData.delimiter ? this.editData.delimiter : ',',
      };
      this.allData = [];
      // 本地文件
      if (
        this.editData.files &&
        this.editData.files.length > 0 &&
        this.editData.files[0].file &&
        this.editData.files[0].file.name
      ) {
        this.loading = true;
        this.$papa.parse(this.editData.files[0].file, config);
      }
      // 远程下载文件
      if (
        this.editData.files &&
        this.editData.files.length > 0 &&
        (!this.editData.files[0].file || !this.editData.files[0].file.name)
      ) {
        let file = this.editData.files[0];
        let conf = {
          url: '/api/automation/file/download',
          method: 'post',
          data: file,
          responseType: 'blob',
        };
        if (file.storage === 'FILE_REF') {
          conf = {
            url: '/file/metadata/download/' + file.fileId,
            method: 'get',
            responseType: 'blob',
          };
        }
        this.result = this.$request(conf).then((response) => {
          const content = response.data;
          const blob = new Blob([content]);
          this.loading = true;
          this.$papa.parse(blob, config);
        });
      }
    },
    createFilter(queryString) {
      return (restaurant) => {
        return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
      };
    },

    querySearch(queryString, cb) {
      let restaurants = [
        { value: 'UTF-8' },
        { value: 'UTF-16' },
        { value: 'GB2312' },
        { value: 'ISO-8859-15' },
        { value: 'US-ASCll' },
      ];
      let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
  },
};
</script>

<style scoped>
ms-is-leaf :deep(.is-leaf) {
  color: red;
}
</style>
